<!DOCTYPE html>
<html lang="en">
<head>
    <title>FreeMarker Form</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>发送 XML 数据到后端</h1>

<form id="xmlForm" method="post">
    <label>姓名：</label>
    <!--required表示属性不能为空-->
    <input type="text" name="name" id="name" required><br>
    <label>年龄：</label>
    <input type="number" name="age" id="age" required><br>
    <!--<button type="submit">提交</button>-->
    <button type="submit" id="submitButton">提交</button>
</form>

<div id="resultContainer"></div>

<script>
    document.getElementById('xmlForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止默认的表单提交

        // 获取表单数据
        const name = document.getElementById('name').value;
        const age = document.getElementById('age').value;

        // 构造 XML 数据
        // 这个是使用js中模版字符串的功能，与thymeleaf和freemarker都没有关系
        const xmlData = `
                <person>
                    <name>${name}</name>
                    <age>${age}</age>
                </person>
            `;

        // 使用 fetch API 发送请求
        fetch('/processXml2', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/xml', // 声明数据格式为 XML
            },
            body: xmlData,
        }).then(response =>{
            if(!response.ok){
                throw new Error('网络响应失败，状态码: ' + response.status);
            }
            return response.text(); //读取返回的xml文本
        }).then(renderedHtml =>{
            // 方法1：将返回的 HTML 内容插入到页面中
            document.getElementById('resultContainer').innerHTML = renderedHtml;

            // 方法 2：打开新页面显示渲染内容
            // 打开新窗口并写入返回的 HTML
            // const newWindow = window.open();
            // newWindow.document.open(); //打开新窗口
            // newWindow.document.write(renderedHtml);//将返回的 HTML 写入新窗口
            // newWindow.document.close(); //结束文档写入

        }).catch(error => {
            console.error('解析或网络请求失败:', error);
            alert('无法加载数据，请检查后端服务或网络连接。');
        });
    });
</script>

</body>
</html>